<template>
    <div class="page">
        <tz-filter :show-net="false" @change="filterChange" :filter-data="filterData">
            <el-cascader
                    class="table-filter-item"
                    size="small"
                    clearable
                    v-model="filterData.deviceTypes"
                    :options="deviceTypeList"
                    :props="{
                            value: 'key',
                            label: 'keyName'
                        }"></el-cascader>
            <el-input :maxlength="100" class="table-filter-item" v-model.trim="filterData.paramName" size="small" clearable placeholder="指标名称"></el-input>
            <el-button v-if="$auth['operation_quota_add']" slot="append" type="primary" icon="el-icon-plus" size="mini" @click="openEdit">增加指标</el-button>
        </tz-filter>
        <tz-table
                :data="loadData"
                row-key="id"
                ref="quotaTable"
                size="mini">
<!--            <el-table-column-->
<!--                    prop="id"-->
<!--                    show-overflow-tooltip-->
<!--                    label="id">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="deviceTypeName"
                    show-overflow-tooltip
                    label="一级分类">
                <template slot-scope="scope">
                    <high-light :value="scope.row.deviceTypeName" :keyword="filterData.deviceTypeName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="deviceTypeTwoName"
                    show-overflow-tooltip
                    label="二级分类">
                <template slot-scope="scope">
                    <high-light :value="scope.row.deviceTypeTwoName" :keyword="filterData.deviceTypeTwoName"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="paramName"
                    show-overflow-tooltip
                    label="指标名称">
                <high-light slot-scope="scope" :value="scope.row.paramName" :keyword="filterData.paramName"></high-light>
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    show-overflow-tooltip
                    label="指标备注">
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    label="操作">
                <template slot-scope="scope">
                    <el-button v-if="$auth['operation_quota_update']" :style="{color: paramId === scope.row.id ? 'red' : ''}" type="text" @click="editItem(scope.row)">编辑</el-button>
                    <el-button v-if="$auth['operation_quota_delete']" type="text" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <ployfit v-if="ployfitVisible" ref="ployfit" :param-id="paramId" @refresh="refresh(false)" @close="closePloy"></ployfit>
    </div>
</template>

<script>
import ployfit from './ployfit'
import { mapState } from 'vuex'

export default {
  name: 'quotaList',
  components: { ployfit },
  data() {
    return {
      isEq: 0,
      filterData: {
        deviceTypes: [],
        paramName: ''
      },
      ployfitVisible: false,
      paramId: ''
    }
  },
  methods: {
    closePloy() {
      setTimeout(() => {
        this.ployfitVisible = false
      }, 500)
    },
    editItem(item) {
      this.ployfitVisible = true
      this.paramId = item.id
      // this.$refs.ployfit.open(item)
    },
    openEdit() {
      this.ployfitVisible = true
      this.paramId = ''
      // this.$refs.ployfit.open({})
    },
    deleteItem(item) {
      this.$confirm(`是否删除：${item.paramName}?`).then(() => {
        this.$http.delete(`/knowledge/deleteQuota?id=${item.id}`).then(() => {
          this.$TZmessage.success('删除成功')
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.refresh()
        })
      // }).catch(err => {
      }).catch(() => {
        console.log('取消')
      })
    },
    loadData(pages) {
      const { paramName, deviceTypes } = this.filterData
      const params = {
        ...pages,
        paramName,
        isEq: this.isEq
      }
      if (deviceTypes[0]) {
        params.deviceType = deviceTypes[0]
      }
      if (deviceTypes[1]) {
        params.deviceTypeTwo = deviceTypes[1]
      }
      return this.$http.get('/knowledge/getQuotaPage', {
        params
      }).then(res => {
        return {
          data: res.records,
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取列表数据失败')
      })
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    refresh(val = true) {
      this.$refs.quotaTable.refresh(val)
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeList'])
  }
}
</script>

<style lang="scss" scoped>
    .page {
        .page-header {
            padding-bottom: 20px;
        }
    }
</style>